<template>
    <div>
        <div @click="router.back()" class=" text-default mt-2 cursor-pointer flex items-center">
            <arrow-left-outlined class=" mr-1" />
            <span> 返回</span>
        </div>

        <!-- user -->
        <div
            class="w-full border-0 border-b border-solid border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800">
            <div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
                <div class="w-[30px] flex flex-col relative items-end">
                    <div class="relative flex"><span
                            style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><img
                                src="https://s.tuojin.cc/face/3.svg" class="rounded-sm"
                                style="min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"></span>
                    </div>
                </div>
                <div class=" mt-1 relative flex w-[calc(100%-50px)] flex-col gap-2 md:gap-3 lg:w-[calc(100%-115px)]">
                    <!---->
                    <div v-html="info.question" class="flex flex-grow flex-col gap-3 pt-1"> </div>
                </div>
            </div>
        </div>

        <!-- gpt -->
        <div
            class=" mt-2 w-full border-0 border-b border-solid border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]">
            <div
                class="relative text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
                <div class="w-[30px] flex flex-col relative items-end">
                    <div class="relative h-[30px] w-[30px] p-1 rounded-sm text-white flex items-center justify-center">
                        <img src="@/assets/logo.jpg" class="h-6 w-6">
                    </div>
                </div>
                <div class=" mt-1 relative flex w-[calc(100%-70px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
                    <div class="markdown">
                        <v-md-editor :model-value="info.answer" @copy-code-success="handleCopyCodeSuccess"
                            mode="preview"></v-md-editor>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { questionsDetail } from '@/request/api';
import {
    ArrowLeftOutlined
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
const router = useRouter();
const handleCopyCodeSuccess = (code: string) => {
    message.success('复制成功!')
}
const props = withDefaults(defineProps<{
    id: string
}>(), {
    id: ''
})
const info = reactive({
    answer: '',
    question: ''
})
const getData = () => {
    questionsDetail(props.id).then(res => {
        if (res.code == 200) {
            info.answer = res.result.answer.content;
            info.question = res.result.question.content;
        }
    })
}
onMounted(() => {
    getData()
})
</script>
<style  >
.vuepress-markdown-body:not(.custom) {
    @apply p-0;
    background-color: #f9fafb;
}
</style>